<template>
  <div id="subpage">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <b>权限设置</b>
        </el-breadcrumb-item>
        <el-breadcrumb-item>角色列表</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <div class="content">
      <div class="xcx-head">
        <div style="display: flex">
          <span>角色列表</span>
        </div>
        <el-button @click="add()" size="small" icon="el-icon-plus" type="success">添加角色</el-button>
      </div>
      <div class="xcx-content">
        <!--列表-->
        <el-table border size="small" :data="tableData" stripe style="width: 100%" v-loading="loading">
          <el-table-column align="center" prop="role_id" label="UID" width="80"></el-table-column>
          <el-table-column align="center" label="角色名称" prop="role_name" width="160"></el-table-column>
          <el-table-column label="" width="*"></el-table-column>
          <el-table-column align="center" label="角色权限" width="140">
            <template #default="scope">
              <el-button size="mini" icon="el-icon-setting" type="primary" plain @click="setting(scope.row)">设置权限</el-button>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="created_at" width="160" label="添加时间"></el-table-column>
          <el-table-column align="center" label="操作" width="180">
            <template #default="scope">
              <el-button size="mini" icon="el-icon-edit" type="primary" plain @click="edit(scope.row.role_id)">编辑</el-button>
              <el-button size="mini" icon="el-icon-delete" type="danger" plain @click="del_item(scope.row.role_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog title="添加角色" :visible.sync="dialogOrderVisible" :close-on-click-modal="false" width="35%">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
        <el-form-item label="角色名称：" prop="role_name" label-width="100px">
          <el-input v-model="ruleForm.role_name" placeholder="请输入角色名称"></el-input>
        </el-form-item>
        <el-form-item label="角色描述：" prop="memo" label-width="100px">
          <el-input type="textarea" v-model="ruleForm.memo" placeholder="请输入角色描述"></el-input>
        </el-form-item>
        <el-form-item label="角色权限：" prop="role_ids" label-width="100px">
          <el-tree :default-checked-keys="checKeys" :data="menuData" show-checkbox node-key="menu_id" ref="trees" highlight-current :props="defaultProps">
          </el-tree>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogOrderVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="confirmDesc('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="权限设置" :visible.sync="dialogSeetingVisible" :close-on-click-modal="false" width="35%">
      <div class="seeting">
        <el-tree :default-checked-keys="checKeys" :data="menuData" show-checkbox node-key="menu_id" ref="tree" highlight-current :props="defaultProps">
        </el-tree>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogSeetingVisible = false">取 消</el-button>
        <el-button size="mini" type="primary" @click="getCheckedKeys">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>
  <script>
export default {
  data() {
    return {
      dialogSeetingVisible: false,
      dialogOrderVisible: false,
      loading: true,
      tableData: [],
      checKeys: [],
      page: 0,
      count: 0,
      limit: 10,
      ruleForm: {
        role_id: "",
        role_name: "",
      },
      rules: {
        role_id: [{ required: true, message: "请选择角色", trigger: "change" }],
        role_name: [
          { required: true, message: "请填写用户名", trigger: "blur" },
        ],
      },
      roleData: [],

      menuData: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1",
            },
            {
              id: 6,
              label: "二级 2-2",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "child",
        label: "name",
      },
      role_id: 0,
    };
  },
  //进入页面加载
  mounted: function () {
    var that = this;
    that.getList();
    that.getRoleList();
  },
  methods: {
    add() {
      this.getListMenu();
      this.dialogOrderVisible = true;
    },

    getCheckedKeys() {
      let ids = this.$refs.tree.getCheckedKeys();
      if (ids.length == 0) {
        this.$message.warning("请选择权限!");
      }
      console.log(this.$refs.tree.getCheckedKeys());
      var that = this;
      that.axios
        .post("/authRole/setAuthRole", {
          role_id: that.role_id,
          ids: ids,
        })
        .then((res) => {
          if (res.code == 200) {
            that.roleData = res.data;
            that.dialogSeetingVisible = false;
            that.getList();
          }
          that.loading = false;
        });
    },

    /**
     * 获取列表
     */
    getListMenu() {
      let that = this;
      that.axios.post("/authMenu/setting").then((res) => {
        if (res) {
          that.menuData = res.data;
        }
        that.loading = false;
      });
    },

    setting(ids) {
      this.getListMenu();
      this.role_id = ids.role_id;
      this.checKeys = ids.role_ids;
      this.dialogSeetingVisible = true;
    },

    getRoleList() {
      var that = this;
      that.axios.post("/gerRoleList").then((res) => {
        if (res.code == 200) {
          that.roleData = res.data;
        }
        that.loading = false;
      });
    },

    confirmDesc(formName) {
      const that = this;
      console.log(formName);
      let ids = this.$refs.trees.getCheckedKeys();
      console.log(ids);
      that.$refs[formName].validate((valid) => {
        if (!valid) return that.$message.warning("请完整填写内容!");
        var formData = {};
        formData = that.ruleForm;
        formData.ids = ids;
        if (that.id) {
          formData.id = that.id;
        }
        that.axios.post("/authRole/beforeSave", formData).then(() => {
          that.$message.success(that.id ? "修改成功" : "添加成功");
          that.dialogOrderVisible = false;
          that.getList();
        });
      });
    },

    edit(ids) {
      var that = this;
      this.getListMenu();
      this.ruleForm.id = ids;
      this.axios.post("/authRole/detail", { id: ids }).then((res) => {
        if (res.code == 200) {
          that.ruleForm = res.data;
          that.checKeys = res.data.role_ids;
        }
        that.loading = false;
      });
      this.dialogOrderVisible = true;
    },

    setStatus(row) {
      var that = this;
      that.axios.post("/authRole/setStatus", {
        id: row.id,
        status: row.status,
      });
    },

    /**
     * 下一页
     */
    handleCurrentChange(currentPage) {
      var that = this;
      that.page = currentPage;
      that.getList();
    },

    del_item(ids) {
      let that = this;
      this.$confirm("此操作不可逆, 是否继续?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        that.axios
          .post("/authRole/destroy", {
            ids: ids,
          })
          .then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: res.msg,
              });
              that.getList();
            } else {
              this.$message({
                type: "info",
                message: res.msg,
              });
            }
          });
      });
    },

    /**
     * 获取列表
     */
    getList() {
      let that = this;
      let formData = {};
      that.axios.post("/authRole/index", formData).then((res) => {
        if (res) {
          that.tableData = res.data;
          that.loading = false;
        }
      });
    },
  },
};
</script>
  <style>
</style>